.loader
  height: 100%
  position: relative
  display: flex
  align-items: center
  justify-content: center

  & span
    font-family: Logo
    color: #333
    font-size: 2rem
    font-weight: bold
    margin: 0 6px
    animation: animate 1s linear infinite

  & span:nth-child(1)
    animation-delay: 0s

  & span:nth-child(2)
    animation-delay: 0.1s

  & span:nth-child(3)
    animation-delay: 0.2s

  & span:nth-child(4)
    animation-delay: 0.3s

  & span:nth-child(5)
    animation-delay: 0.4s

  & span:nth-child(6)
    animation-delay: 0.5s

  & span:nth-child(7)
    animation-delay: 0.6s

  & span:nth-child(8)
    animation-delay: 0.7s

  & span:nth-child(9)
    animation-delay: 0.8s

  & span:nth-child(10)
    animation-delay: 0.9s

  & span:nth-child(11)
    animation-delay: 1s

@keyframes animate
  0%
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.5)
    transform: translateX(0) scale(1)

  50%
    text-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5)
    transform: translateX(4px) scale(1.2)

  100%
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.5)
    transform: translateX(0px) scale(1)
